<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="css/gwc.css" />
		<script src="libs/jquery.js"></script>
	</head>
	<body>
		<div class="shop_car_box">
			<div class="w">
				<div class="title">
					<span class="line"></span>
					我的购物车
				</div>
				<div class="cart-warp">
					<!-- 头部全选模块 -->
					<div class="cart-thead">
						<div class="t-checkbox">
							<input
								type="checkbox"
								style="margin-right: 5px"
								name=""
								id=""
								class="checkall"
							/>
							全选
						</div>
						<div class="t-goods">商品信息</div>
						<div class="t-price">单价</div>
						<div class="t-num">数量</div>
						<div class="t-sum">金额</div>
						<div class="t-action">操作</div>
					</div>
					<!-- 商品详细模块 -->
					<div class="cart-item-list">
						<div class="shop">
							<div class="J_ItemHead">
								<input class="J_CheckBoxShop" type="checkbox" name="orders[]" />
								玫瑰与鹿旗舰店
							</div>
							<div class="cart-item">
								<div class="p-checkbox" style="width: 95px !important">
									<input type="checkbox" name="" id="" class="j-checkbox" />
								</div>
								<div class="p-goods">
									<div class="p-img">
										<img
											src="../resources/style/system/front/default/images/rexiao.png"
											alt=""
										/>
									</div>
									<div class="p-msg">
										<div class="descript">
											【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲
										</div>
										<div class="p-type">
											<span>类别：360g</span>&nbsp;&nbsp;&nbsp;&nbsp;
											<span>数量：1</span>
										</div>
									</div>
								</div>
								<div class="p-price">￥12.60</div>
								<div class="p-num">
									<div class="quantity-form">
										<a href="javascript:;" class="decrement">-</a>
										<input type="text" class="itxt" value="1" />
										<a href="javascript:;" class="increment">+</a>
									</div>
								</div>
								<div class="p-sum">￥12.60</div>
								<div class="p-action"><a href="javascript:;">删除</a></div>
							</div>
						</div>
						<div class="shop">
							<div class="J_ItemHead">
								<input class="J_CheckBoxShop" type="checkbox" name="orders[]" />
								玫瑰与鹿旗舰店
							</div>
							<div class="cart-item">
								<div class="p-checkbox" style="width: 95px !important">
									<input type="checkbox" name="" id="" class="j-checkbox" />
								</div>
								<div class="p-goods">
									<div class="p-img">
										<img
											src="../resources/style/system/front/default/images/rexiao.png"
											alt=""
										/>
									</div>
									<div class="p-msg">
										<div class="descript">
											唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版
											小学生二三年级课外阅读书籍
										</div>
										<div class="p-type">
											<span>类别：360g</span>&nbsp;&nbsp;&nbsp;&nbsp;
											<span>数量：1</span>
										</div>
									</div>
								</div>
								<div class="p-price">￥29.80</div>
								<div class="p-num">
									<div class="quantity-form">
										<a href="javascript:;" class="decrement">-</a>
										<input type="text" class="itxt" value="1" />
										<a href="javascript:;" class="increment">+</a>
									</div>
								</div>
								<div class="p-sum">￥29.80</div>
								<div class="p-action"><a href="javascript:;">删除</a></div>
							</div>
							<div class="cart-item">
								<div class="p-checkbox" style="width: 95px !important">
									<input type="checkbox" name="" id="" class="j-checkbox" />
								</div>
								<div class="p-goods">
									<div class="p-img">
										<img
											src="../resources/style/system/front/default/images/rexiao.png"
											alt=""
										/>
									</div>
									<div class="p-msg">
										<div class="descript">
											唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版
											小学生二三年级课外阅读书籍
										</div>
										<div class="p-type">
											<span>类别：360g</span>&nbsp;&nbsp;&nbsp;&nbsp;
											<span>数量：1</span>
										</div>
									</div>
								</div>
								<div class="p-price">￥29.80</div>
								<div class="p-num">
									<div class="quantity-form">
										<a href="javascript:;" class="decrement">-</a>
										<input type="text" class="itxt" value="1" />
										<a href="javascript:;" class="increment">+</a>
									</div>
								</div>
								<div class="p-sum">￥29.80</div>
								<div class="p-action"><a href="javascript:;">删除</a></div>
							</div>
						</div>
					</div>
					<!-- 结算模块 -->
					<div class="cart-floatbar">
						<div class="select-all">
							<input type="checkbox" name="" id="" class="checkall" />全选
						</div>
						<div class="operation">
							<a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
							<a href="javascript:;" class="clear-all">清理购物车</a>
						</div>
						<div class="toolbar-right">
							<div class="amount-sum">已经选<em>1</em>件商品</div>
							<div class="price-sum">合计（不含运费）： <em>￥12.60</em></div>
							<div class="btn-area">去结算</div>
						</div>
					</div>
					<!-- cart-floatbar end -->
				</div>
			</div>
		</div>
		<!-- jq -->
		<script>
			// 先计算金额
			getSum();

			// 1当全选按钮改变时，让小复选框按钮和全选按钮保持一致。
			// 全选按钮被选中时，让所有商品背景色改变，反之则去掉背景色，同时也要改变已选商品件数和总额
			// .checkall是全选复选框；.j-checkbox是商品的复选框；.J_CheckBoxShop是某个店铺的全选复选框
			$(".checkall").change(function () {
				// 当全选按钮改变时，让小复选框按钮和全选按钮保持一致（隐式迭代，不需要循环遍历）
				$(".j-checkbox, .checkall,.J_CheckBoxShop").prop(
					"checked",
					$(this).prop("checked")
				);
				getSum(); // 计算总额函数
				// 添加背景
				// 判断是否是选中状态，是的话添加check-cart-item类，没有就移除
				if ($(this).prop("checked")) {
					$(".cart-item").addClass("check-cart-item");
				} else {
					$(".cart-item").removeClass("check-cart-item");
				}
			});

			// 2当小复选框按钮改变时，判断是否所有的小按钮都是选中状态，是的话让全选按钮为选中状态，否则为未选中状态。
			// 通过已选复选框的个数是否等于所有小复选框的总个数来判断，同时也要改变背景色和总额模块
			$(".j-checkbox").change(function () {
				// if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
				//     $(".checkall").prop("checked", true);
				// } else {
				//     $(".checkall").prop("checked", false);
				// }
				getSum(); //金额结算

				shopItemCheck($(this)); //此方法可删除，将上面的注释解开始一样的效果
				shopAllcheck();
				// 当小复选框为选中状态时，改变背景颜色（添加check-cart-item类）
				if ($(this).prop("checked")) {
					$(this).parents(".cart-item").addClass("check-cart-item");
				} else {
					$(this).parents(".cart-item").removeClass("check-cart-item");
				}
			});

			// 3、可以通过点击加减号或者直接修改文本框来修改商品数量，后边的小计也做相应的变化
			// (1)点击+按钮，文本框数字加一，小计加价。
			// 先把原来的数量获取过来，然后在原来的基础上加一再赋给文本框；把单价获取过来，乘以文本框数量就是小计
			$(".increment").click(function () {
				var n = $(this).siblings(".itxt").val();
				n++;
				$(this).siblings(".itxt").val(n);
				// 小计模块
				// num为获取过来的单价，用substr()截取字符串把前边的￥去掉
				var num = $(this)
					.parents(".p-num")
					.siblings(".p-price")
					.html()
					.substr(1);
				// toFixed(2)保留两位小数
				var price = (num * n).toFixed(2);
				$(this)
					.parents(".p-num")
					.siblings(".p-sum")
					.html("￥" + price);
				getSum();
			});

			// (2)点击-按钮，文本框数字减一，小计减价。
			// 具体方法同上，有一点不一样是商品数量不能小于1，要判断一下
			$(".decrement").click(function () {
				var n = $(this).siblings(".itxt").val();
				n <= 1 ? n : n--;
				$(this).siblings(".itxt").val(n);
				// 小计模块
				var num = $(this)
					.parents(".p-num")
					.siblings(".p-price")
					.html()
					.substr(1);
				// toFixed(2)保留两位小数
				var price = (num * n).toFixed(2);
				$(this)
					.parents(".p-num")
					.siblings(".p-sum")
					.html("￥" + price);
				getSum();
			});

			// (3)直接修改文本框改变数量
			$(".itxt").change(function () {
				var n = $(this).val();
				var num = $(this)
					.parents(".p-num")
					.siblings(".p-price")
					.html()
					.substr(1);
				// toFixed(2)保留两位小数
				var price = (num * n).toFixed(2);
				$(this)
					.parents(".p-num")
					.siblings(".p-sum")
					.html("￥" + price);
				getSum();
			});

			// 4、 计算已选商品数及总额。封装成一个函数，页面加载完时应先调用一下，更新数据

			// 声明变量来存储已选商品数以及总额，用each()遍历已选商品。
			function getSum() {
				var count = 0;
				var money = 0;
				// 只遍历选中的商品   each遍历，i为索引，ele为对象
				$(".j-checkbox:checked")
					.parents(".cart-item")
					.find(".itxt")
					.each(function (i, ele) {
						count += parseInt($(ele).val()); // 会有小误差，要取整一下
					});
				$(".amount-sum em").text(count);
				$(".j-checkbox:checked")
					.parents(".cart-item")
					.find(".p-sum")
					.each(function (i, ele) {
						money += parseFloat($(ele).text().substr(1));
					});
				$(".price-sum em").text("￥" + money.toFixed(2));
			}

			// 5、店铺的全选复选框的点击改变事件
			$(".J_CheckBoxShop").change(function () {
				if ($(this).prop("checked")) {
					// 设置选中
					$(this).parents(".shop").find(".j-checkbox").prop("checked", true);
					// 设置选中样式
					$(this)
						.parents(".shop")
						.find(".cart-item")
						.addClass("check-cart-item");
				} else {
					// 清除选中
					$(this).parents(".shop").find(".j-checkbox").prop("checked", false);
					// 清楚选中状态
					$(this)
						.parents(".shop")
						.find(".cart-item")
						.removeClass("check-cart-item");
				}

				shopAllcheck();
			});

			// 删除单个商品
			$(".p-action a").click(function () {
				// $(this).parents(".cart-item").remove();
				var item = $(this).parents(".shop").find(".j-checkbox").length; //获取当前店铺的checkbox的数量
				var isShopCheck = $(this)
					.parents(".shop")
					.find(".J_CheckBoxShop")
					.prop("checked"); //获取当前店铺是否为全选中状态
				console.log(item, "删除单个商品时，输出当前店铺选中的商品个数");
				if (item > 1) {
					// 移除当前商品
					$(this).parents(".cart-item").remove();
					// 获取删除某个商品后的商品数量
					var currentItem = $(this).parents(".shop").find(".j-checkbox").length;
					var currentItem_check = $(this)
						.parents(".shop")
						.find(".j-checkbox:checked").length;
					if ((currentItem = currentItem_check)) {
						$(this)
							.parents(".shop")
							.find(".J_CheckBoxShop")
							.prop("checked", true);
					} else {
						$(this)
							.parents(".shop")
							.find(".J_CheckBoxShop")
							.prop("checked", false);
					}
				} else if (item == 1) {
					// 如果只有一个商品，则直接删除店铺
					$(this).parents(".shop").remove();
				}
				getSum();
			});
			// 删除选中商品
			$(".remove-batch").click(function () {
				// $(".j-checkbox:checked").parents(".cart-item").remove();//删除操作
				var item_check = $(".cart-item-list").find(".j-checkbox:checked");
				if (item_check.length == 0) {
					// alert('暂无可删除记录')
				} else {
					// // 遍历
					for (var i = 0; i < item_check.length; i++) {
						// 如果该商品的店铺全选复选框是选中状态，则说明删除的是整个店铺及店铺商品信息;
						// 否则就只删除该商品
						if (
							$(item_check[i])
								.parents(".shop")
								.find(".J_CheckBoxShop")
								.prop("checked")
						) {
							$(item_check[i]).parents(".shop").remove();
						} else {
							$(item_check[i]).parents(".cart-item").remove();
						}
					}
				}
				console.log(item_check, "输出选中的商品数组");
				getSum();

				// 并判断当前店铺是否还有选中的商品，如果有则继续，否则删除掉当前店铺
			});
			// 清理购物车
			$(".clear-all").click(function () {
				$(".shop").remove(); //删除店铺
				getSum();
			});

			// 购物车店铺的全选---已用
			function shopAllcheck() {
				// var item =$('.mui-content').children('.commlistFrm').find('.GoodsCheck').length;//获取购物车checkbox的数量
				var item = $(".cart-item-list").find(".j-checkbox").length; //获取购物车checkbox的数量
				var item_check = $(".cart-item-list").find(
					".j-checkbox:checked"
				).length;
				if (item == item_check) {
					$(".checkall").prop("checked", true);
				} else {
					$(".checkall").prop("checked", false);
				}

				getSum();
			}
			// /店铺内商品的点击事件
			function shopItemCheck(t) {
				// t是某个商品
				var item = $(t).parents(".shop").find(".j-checkbox").length; //获取店铺内商品的checkbox的数量
				var item_check = $(t)
					.parents(".shop")
					.find(".j-checkbox:checked").length; //获取店铺内商品的checkbox选中的数量
				if (item == item_check) {
					// 如果店铺内的商品数量等于商品选中的数量，说明点普内商品全选，则让店铺全选复选框选中
					$(t).parents(".shop").find(".J_CheckBoxShop").prop("checked", true);
				} else {
					$(t).parents(".shop").find(".J_CheckBoxShop").prop("checked", false);
				}
			}
		</script>
	</body>
</html>
